<template>
	<view class="zhifupop">
		<u-popup mode="bottom" v-model="zhifupop" length="auto" border-radius="32" @close="closepopup"
			mask-close-able="false">
			<view class="flex-col section_5">
				<image :src="newfwqUrl+'0a27598f7de6a044976767d76954f3d.png'" mode="" class="gbimg" @click="closepopup">
				</image>
				<text class="self-center font text_10">支付方式</text>
				<view class="self-center group_7">
					<text class="text_12">￥</text>
					<text class="text_11">{{OrderInfo.Amount?OrderInfo.Amount:0}}</text>
				</view>
				<view class="flex-col self-stretch group_8">
					<!-- #ifdef APP-PLUS -->
					<view class="flex-row justify-between items-center mb-26" @click="zhifutype(index)"
						v-for="(item,index) in zhifuList" :key="index">
						<view class="flex-row items-center">
							<image class="shrink-0 image_6" :src="item.icon" />
							<text class="font_2 text_13 ml-9">{{item.title}}</text>
						</view>
						<image class="image_7" src="/static/bendi/a976573c5900a86628275b530a0a942d.png"
							v-if="zhifuIndex==index" />
						<image class="image_7" src="/static/bendi/31bcb4fb21c9e6bd65d84039aec8f13e.png" v-else />
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="flex-row justify-between items-center mb-26" @click="zhifutype(index)"
						v-for="(item,index) in wxList" :key="index">
						<view class="flex-row items-center">
							<image class="shrink-0 image_6" :src="item.icon" />
							<text class="font_2 text_13 ml-9">{{item.title}}</text>
						</view>
						<image class="image_7" src="/static/bendi/a976573c5900a86628275b530a0a942d.png"
							v-if="zhifuIndex==index" />
						<image class="image_7" src="/static/bendi/31bcb4fb21c9e6bd65d84039aec8f13e.png" v-else />
					</view>
					<!-- #endif -->
				</view>
				<view class="flex-col justify-start items-center self-stretch text-wrapper" @click="yanshiClick?queren():''">
					<text class="font_2 text_15">确认支付</text>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				zhifupop: false,
				zhifuIndex: 0,
				zhifuType: 2,
				zhifuList: [{
						icon: '/static/bendi/4d32f208e6b8acbb35e331a7026b0078.png',
						title: '微信',
						Type: 2,
					},
					{
						icon: '/static/bendi/00e28323ee4a30212a0e6dfbc0e8dc5f.png',
						title: '支付宝',
						Type: 4,
					},

				],	
				wxList: [{
						icon: '/static/bendi/4d32f208e6b8acbb35e331a7026b0078.png',
						title: '微信',
						Type: 2,
					},
				],
				OrderInfo: {},
				
				yanshiClick:true,
			}
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			orderInfo: {
				type: Object,
				default: {}
			},
			tctzIndex: {
				type: Number,
				default: 0
			},
		},
		mounted() {},
		watch: {
			show(val) {
				console.log(val)
				if (val) {
					this.zhifupop = true
				} else {
					this.zhifupop = false
				}
			},
			orderInfo(res) {
				console.log(res, this.tctzIndex)
				this.OrderInfo = res
			},
		},
		methods: {
			zhifutype(index) {
				this.zhifuIndex = index
				this.zhifuType = this.zhifuList[index].Type
			},
			closepopup() {
				this.zhifupop = false
				this.$emit("changezhifutc", false)
			},
			async queren() {
				// console.log(this.tctzIndex)
				this.yanshiClick = false
				var paydata = {}
				if (this.tctzIndex == 0) {
					paydata = {
						"OrderNo": this.OrderInfo.OrderNo, //会员支付订单
						"PayType": this.zhifuType
					}
					var pay_res = await this.getdatas(paydata, "/api/Order/OrderAgainPay");
					if (pay_res.code == 200) {
						this.payOrder(pay_res, '/pages2/pages/order/order')
					}
				} else if (this.tctzIndex == 1) {    //商品支付订单&会员支付订单&订单页支付
					paydata = {
						"OrderNo": this.OrderInfo.OrderNo, //订单编号
						"PayType": this.zhifuType
					}
					var pay_res = await this.getdatas(paydata, "/api/Order/OrderAgainPay");
					if (pay_res.code == 200) {
						this.payOrder(pay_res, '/pages2/pages/order/order')
					}
				} else if (this.tctzIndex == 2) {   //我的训练营
					paydata = {
						"No": this.OrderInfo.No, //订单编号
						"PayType": this.zhifuType
					}
					var pay_res = await this.getdatas(paydata, "/api/Course/OrderAgainPay");
					if (pay_res.code == 200) {
						this.payOrder(pay_res, '/pages5/gerenzhongxin/wodebaoming?type=1')
					}
				}
				else if (this.tctzIndex == 3) {    //我的课程支付
					paydata = {
						"No": this.OrderInfo.No, //订单编号
						"PayType": this.zhifuType
					}
					var pay_res = await this.getdatas(paydata, "/api/Course/OrderAgainPay");
					if (pay_res.code == 200) {
						this.payOrder(pay_res, '/pages5/gerenzhongxin/wodebaoming?type=0')
					}
				}
				else if (this.tctzIndex == 4) {    //我的课程支付
					paydata = {
						"No": this.OrderInfo.No, //订单编号
						"PayType": this.zhifuType
					}
					var pay_res = await this.getdatas(paydata, "/api/Course/OrderAgainPay");
					if (pay_res.code == 200) {
						this.payOrder(pay_res, '/pages5/gerenzhongxin/wodebaoming?type=1')
					}
				}

			},
			//调起支付
			payOrder: async function(paydata, url) {
				var that = this;
				var rs = paydata
				// var rs = await orderAgainPay(paydata);
				if (rs.code == 200) {
					let raData = rs.data;
					//调起微信支付
					if (raData.IsPay) {
						// #ifdef APP-PLUS
						var provider = (paydata.PayType == 2 ? 'wxpay' : 'alipay');
						var orderInfo = undefined;
						if (paydata.PayType == 2) {
							var wxInfo = raData.wxData;
							//console.log("wxInfo",wxInfo)
							//微信app支付
							var prepayid = wxInfo.package.split("=")[1];
							//console.log("prepayid", prepayid)
							orderInfo = {
								appid: wxInfo.appId,
								noncestr: wxInfo.nonceStr,
								package: "Sign=WXPay",
								partnerid: raData.partnerid, //商户号
								prepayid: prepayid,
								timestamp: wxInfo.timeStamp,
								sign: wxInfo.paySign,
							}
						} else {
							//支付宝app支付
							orderInfo = raData.aliData;
						}
						uni.requestPayment({
							provider: provider,
							orderInfo: orderInfo,
							success: function(res) {

								uni.showToast({
									icon: 'success',
									title: '支付成功'
								})
								that.yanshiClick = true
								that.orderPayToUrl(url)
							},
							fail: function(err) {
								that.$u.toast("支付失败")
								that.yanshiClick = true
								that.orderPayToUrl(url)
							}
						});

						// #endif

						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: raData.wxData.timeStamp,
							nonceStr: raData.wxData.nonceStr,
							package: raData.wxData.package,
							signType: raData.wxData.signType,
							paySign: raData.wxData.paySign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.showToast({
									icon: 'success',
									title: '支付成功'
								})
								that.yanshiClick = true
								that.orderPayToUrl(url)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								that.$u.toast("支付失败")
								that.yanshiClick = true
								that.orderPayToUrl(url)
							}
						});
						// #endif

					} else {
						// uni.showToast({
						// 	icon: 'success',
						// 	title: rs.msg
						// })

						uni.showToast({
							icon: 'success',
							title: rs.msg
						})
						that.yanshiClick = true
						that.orderPayToUrl(url)
					}

				} else that.$u.toast(rs.msg);that.yanshiClick = true
			},
			orderPayToUrl(url) {
				this.closepopup()
				if (this.tctzIndex == 0) {
					uni.navigateTo({
						url: url
					})
				} else if (this.tctzIndex == 1) {
					uni.redirectTo({
						url: url
					})
				} else if (this.tctzIndex == 2) {
					uni.redirectTo({
						url: url
					})
				}
				else if (this.tctzIndex == 3) {
					uni.redirectTo({
						url: url
					})
				}
				else if (this.tctzIndex == 4) {
					uni.redirectTo({
						url: url
					})
				}

			}
		}
	}
</script>

<style lang="less">
	.gbimg {
		position: absolute;
		right: 32rpx;
		top: 32rpx;
		width: 48rpx;
		height: 48rpx;
		padding: 8rpx;
		box-sizing: initial;
	}

	.u-drawer-bottom {
		background-color: #003460;
	}

	.zhifupop {
		.ml-9 {
			margin-left: 18rpx;
		}

		.mb-26 {
			margin-bottom: 52rpx;
		}

		.section_5 {
			position: relative;
			padding: 38rpx 32rpx 71rpx;
			background-color: #003460;
			border-radius: 32rpx 32rpx 0rpx 0rpx;

			.font {
				font-size: 30rpx;
				font-family: SourceHanSansCN;
				color: #ffffff;
			}

			.text_10 {
				line-height: 28.24rpx;
			}

			.group_7 {
				margin-top: 76rpx;

				.text_12 {
					color: #ffffff;
					font-size: 42rpx;
					font-family: PingFang SC;
					font-weight: 700;
					line-height: 30.28rpx;
				}

				.text_11 {
					color: #ffffff;
					font-size: 72rpx;
					font-family: PingFang SC;
					font-weight: 700;
					line-height: 51.92rpx;
				}
			}

			.group_8 {
				margin-top: 128rpx;

				.image_6 {
					width: 64rpx;
					height: 64rpx;
				}

				.text_13 {
					line-height: 33.54rpx;
				}

				.image_7 {
					width: 40rpx;
					height: 40rpx;
				}

				.image_8 {
					width: 64rpx;
					height: 58rpx;
				}

				.text_14 {
					line-height: 33.78rpx;
				}
			}

			.text-wrapper {
				margin-top: 168rpx;
				padding: 34rpx 0 30rpx;
				background-color: #008fd7;
				border-radius: 49rpx;

				.text_15 {
					line-height: 33.26rpx;
					text-shadow: 0rpx 11rpx 32rpx #1c2c1d2b;
				}
			}

			.font_2 {
				font-size: 36rpx;
				font-family: SourceHanSansCN;
				line-height: 33.7rpx;
				color: #ffffff;
			}
		}
	}
</style>